<template>
    <div class="music-app">
      <!-- 顶部导航栏 -->
      <header class="app-header">
        <div class="logo-area">
          <div class="logo">
            <i class="icon-cloud"></i>
            <span>网易云音乐</span>
          </div>
          <nav class="main-nav">
            <a 
              v-for="(item, index) in navItems" 
              :key="index" 
              :class="{ active: currentNav === index }"
              @click="currentNav = index"
            >
              {{ item }}
            </a>
          </nav>
        </div>
        <div class="search-area">
          <div class="search-box">
            <input type="text" placeholder="搜索音乐、歌手、歌词" v-model="searchKeyword">
            <button @click="searchMusic">
              <i class="icon-search"></i>
            </button>
          </div>
        </div>
        <div class="user-area">
          <div class="user-avatar" @click="toggleUserMenu">
            <img :src="user.avatar" alt="用户头像">
            <span>{{ user.name }}</span>
            <div class="user-menu" v-show="showUserMenu">
              <div class="menu-item">个人主页</div>
              <div class="menu-item">等级</div>
              <div class="menu-item">设置</div>
              <div class="menu-item logout" @click="logout">退出</div>
            </div>
          </div>
          <button class="btn-vip">开通VIP</button>
        </div>
      </header>
  
      <!-- 主体内容区 -->
      <main class="app-main">
        <!-- 轮播图 -->
        <section class="banner-section">
          <div class="banner">
            <div 
              v-for="(banner, index) in banners" 
              :key="banner.id" 
              class="banner-item"
              :class="{ active: currentBanner === index }"
            >
              <img :src="banner.image" alt="Banner">
            </div>
          </div>
          <div class="banner-dots">
            <span 
              v-for="(dot, index) in banners" 
              :key="index" 
              :class="{ active: currentBanner === index }"
              @click="currentBanner = index"
            ></span>
          </div>
        </section>
  
        <!-- 推荐歌单 -->
        <section class="playlist-section">
          <div class="section-header">
            <h2>推荐歌单</h2>
            <a class="more-link">更多 &gt;</a>
          </div>
          <div class="playlist-container">
            <div 
              v-for="playlist in playlists" 
              :key="playlist.id" 
              class="playlist-card"
              @click="selectPlaylist(playlist)"
            >
              <div class="playlist-cover">
                <img :src="playlist.cover" alt="歌单封面">
                <div class="play-count">
                  <i class="icon-play"></i>
                  {{ formatPlayCount(playlist.playCount) }}
                </div>
                <div class="play-icon">
                  <i class="icon-play-fill"></i>
                </div>
              </div>
              <div class="playlist-info">
                <h3>{{ playlist.name }}</h3>
              </div>
            </div>
          </div>
        </section>
  
        <!-- 最新音乐 -->
        <section class="new-songs-section">
          <div class="section-header">
            <h2>最新音乐</h2>
            <a class="more-link">更多 &gt;</a>
          </div>
          <div class="song-list">
            <div 
              v-for="(song, index) in songs" 
              :key="song.id" 
              class="song-item"
              :class="{ playing: currentSong.id === song.id && isPlaying }"
            >
              <div class="song-index">{{ index + 1 }}</div>
              <div class="song-info" @click="playSong(song)">
                <div class="song-name">{{ song.name }}</div>
                <div class="song-artist">
                  <span v-if="song.vip" class="vip-tag">VIP</span>
                  {{ song.artist }} - {{ song.album }}
                </div>
              </div>
              <div class="song-actions">
                <button class="btn-action" @click="addToPlaylist(song)">
                  <i class="icon-add"></i>
                </button>
                <button class="btn-action">
                  <i class="icon-download"></i>
                </button>
              </div>
              <div class="song-duration">{{ formatDuration(song.duration) }}</div>
            </div>
          </div>
        </section>
      </main>
  
      <!-- 播放控制栏 -->
      <footer class="player-control">
        <div class="player-left">
          <div class="song-cover">
            <img :src="currentSong.cover" alt="歌曲封面">
          </div>
          <div class="song-details">
            <div class="song-name">{{ currentSong.name }}</div>
            <div class="song-artist">{{ currentSong.artist }}</div>
          </div>
          <button class="btn-like" :class="{ liked: currentSong.liked }" @click="toggleLike">
            <i class="icon-like"></i>
          </button>
        </div>
        
        <div class="player-center">
          <div class="player-controls">
            <button class="btn-control" @click="changePlayMode">
              <i :class="playModeIcon"></i>
            </button>
            <button class="btn-control" @click="playPrevSong">
              <i class="icon-prev"></i>
            </button>
            <button class="btn-play" @click="togglePlay">
              <i :class="isPlaying ? 'icon-pause' : 'icon-play'"></i>
            </button>
            <button class="btn-control" @click="playNextSong">
              <i class="icon-next"></i>
            </button>
            <button class="btn-control">
              <i class="icon-lyrics"></i>
            </button>
          </div>
          <div class="progress-bar">
            <span class="current-time">{{ formatDuration(currentTime) }}</span>
            <div class="progress-track" @click="setProgress">
              <div class="progress" :style="{ width: progressPercent + '%' }">
                <div class="progress-handle"></div>
              </div>
            </div>
            <span class="total-time">{{ formatDuration(currentSong.duration) }}</span>
          </div>
        </div>
        
        <div class="player-right">
          <button class="btn-volume">
            <i class="icon-volume"></i>
          </button>
          <div class="volume-bar">
            <div class="volume-track">
              <div class="volume-level" :style="{ width: volume + '%' }"></div>
            </div>
          </div>
          <button class="btn-playlist" @click="showPlaylist = !showPlaylist">
            <i class="icon-playlist"></i>
          </button>
        </div>
  
        <!-- 播放列表 -->
        <div class="playlist-panel" v-show="showPlaylist">
          <div class="panel-header">
            <h3>播放列表 ({{ playlistSongs.length }})</h3>
            <button class="btn-clear" @click="clearPlaylist">清空</button>
          </div>
          <div class="playlist-songs">
            <div 
              v-for="(song, index) in playlistSongs" 
              :key="song.id" 
              class="playlist-song"
              :class="{ active: currentSong.id === song.id }"
              @click="playSong(song)"
            >
              <div class="song-name">{{ song.name }}</div>
              <div class="song-artist">{{ song.artist }}</div>
              <div class="song-duration">{{ formatDuration(song.duration) }}</div>
              <button class="btn-remove" @click.stop="removeFromPlaylist(index)">
                <i class="icon-close"></i>
              </button>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue'
  
  // 用户信息
  const user = ref({
    name: '音乐爱好者',
    avatar: 'https://picsum.photos/40/40?random=1'
  })
  
  // 导航项
  const navItems = ref(['发现音乐', '播客', '视频', '关注', '直播', '私人FM'])
  const currentNav = ref(0)
  
  // 搜索功能
  const searchKeyword = ref('')
  const showUserMenu = ref(false)
  
  // 轮播图
  const banners = ref([
    { id: 1, image: 'https://picsum.photos/1200/400?random=2' },
    { id: 2, image: 'https://picsum.photos/1200/400?random=3' },
    { id: 3, image: 'https://picsum.photos/1200/400?random=4' }
  ])
  const currentBanner = ref(0)
  
  // 推荐歌单
  const playlists = ref([
    { id: 1, name: '每日推荐', cover: 'https://picsum.photos/200/200?random=5', playCount: 12345678 },
    { id: 2, name: '私人雷达', cover: 'https://picsum.photos/200/200?random=6', playCount: 8765432 },
    { id: 3, name: '热歌榜', cover: 'https://picsum.photos/200/200?random=7', playCount: 7654321 },
    { id: 4, name: '新歌榜', cover: 'https://picsum.photos/200/200?random=8', playCount: 6543210 },
    { id: 5, name: '飙升榜', cover: 'https://picsum.photos/200/200?random=9', playCount: 5432109 },
    { id: 6, name: '原创榜', cover: 'https://picsum.photos/200/200?random=10', playCount: 4321098 }
  ])
  
  // 最新音乐
  const songs = ref([
    { id: 1, name: '夏天的风', artist: '周杰伦', album: '夏日特辑', duration: 240, cover: 'https://picsum.photos/50/50?random=11', vip: false },
    { id: 2, name: '孤勇者', artist: '陈奕迅', album: '英雄联盟主题曲', duration: 210, cover: 'https://picsum.photos/50/50?random=12', vip: false },
    { id: 3, name: '起风了', artist: '买辣椒也用券', album: '起风了', duration: 195, cover: 'https://picsum.photos/50/50?random=13', vip: true },
    { id: 4, name: '晴天', artist: '周杰伦', album: '叶惠美', duration: 265, cover: 'https://picsum.photos/50/50?random=14', vip: false },
    { id: 5, name: '光年之外', artist: 'G.E.M.邓紫棋', album: '光年之外', duration: 235, cover: 'https://picsum.photos/50/50?random=15', vip: true }
  ])
  
  // 播放器状态
  const isPlaying = ref(false)
  const currentTime = ref(0)
  const currentSong = ref(songs.value[0])
  const playlistSongs = ref([...songs.value])
  const showPlaylist = ref(false)
  const volume = ref(80)
  
  // 播放模式 (0: 顺序播放, 1: 单曲循环, 2: 随机播放)
  const playMode = ref(0)
  
  // 计算属性
  const progressPercent = computed(() => {
    return (currentTime.value / currentSong.value.duration) * 100
  })
  
  const playModeIcon = computed(() => {
    return playMode.value === 0 ? 'icon-sequence' : 
           playMode.value === 1 ? 'icon-loop' : 'icon-random'
  })
  
  // 方法定义
  function toggleUserMenu() {
    showUserMenu.value = !showUserMenu.value
  }
  
  function logout() {
    alert('用户已退出登录')
    showUserMenu.value = false
  }
  
  function searchMusic() {
    if (searchKeyword.value.trim()) {
      alert(`搜索: ${searchKeyword.value}`)
    }
  }
  
  function formatPlayCount(count) {
    if (count > 10000) {
      return (count / 10000).toFixed(1) + '万'
    }
    return count
  }
  
  function formatDuration(seconds) {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`
  }
  
  function selectPlaylist(playlist) {
    alert(`打开歌单: ${playlist.name}`)
  }
  
  function playSong(song) {
    currentSong.value = song
    isPlaying.value = true
    currentTime.value = 0
    
    // 如果歌曲不在播放列表中，则添加
    if (!playlistSongs.value.some(s => s.id === song.id)) {
      playlistSongs.value.push(song)
    }
  }
  
  function togglePlay() {
    isPlaying.value = !isPlaying.value
  }
  
  function playPrevSong() {
    const currentIndex = playlistSongs.value.findIndex(song => song.id === currentSong.value.id)
    const prevIndex = (currentIndex - 1 + playlistSongs.value.length) % playlistSongs.value.length
    playSong(playlistSongs.value[prevIndex])
  }
  
  function playNextSong() {
    const currentIndex = playlistSongs.value.findIndex(song => song.id === currentSong.value.id)
    let nextIndex = (currentIndex + 1) % playlistSongs.value.length
    
    // 随机播放模式
    if (playMode.value === 2) {
      nextIndex = Math.floor(Math.random() * playlistSongs.value.length)
    }
    
    playSong(playlistSongs.value[nextIndex])
  }
  
  function changePlayMode() {
    playMode.value = (playMode.value + 1) % 3
  }
  
  function setProgress(event) {
    const progressBar = event.currentTarget
    const clickPosition = event.clientX - progressBar.getBoundingClientRect().left
    const progressBarWidth = progressBar.clientWidth
    const percentage = clickPosition / progressBarWidth
    currentTime.value = percentage * currentSong.value.duration
  }
  
  function toggleLike() {
    currentSong.value.liked = !currentSong.value.liked
  }
  
  function addToPlaylist(song) {
    if (!playlistSongs.value.some(s => s.id === song.id)) {
      playlistSongs.value.push(song)
      alert(`"${song.name}" 已添加到播放列表`)
    } else {
      alert(`"${song.name}" 已在播放列表中`)
    }
  }
  
  function removeFromPlaylist(index) {
    playlistSongs.value.splice(index, 1)
  }
  
  function clearPlaylist() {
    playlistSongs.value = []
    isPlaying.value = false
    currentSong.value = {}
  }
  
  // 模拟播放进度
  onMounted(() => {
    setInterval(() => {
      if (isPlaying.value) {
        currentTime.value += 1
        if (currentTime.value >= currentSong.value.duration) {
          playNextSong()
        }
      }
    }, 1000)
  })
  </script>
  
  <style scoped>
  .music-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f7;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #333;
  }
  
  /* 顶部导航栏样式 */
  .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding: 0 20px;
    background-color: #ec4141;
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
  
  .logo-area {
    display: flex;
    align-items: center;
  }
  
  .logo {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    margin-right: 40px;
  }
  
  .logo i {
    font-size: 28px;
    margin-right: 8px;
  }
  
  .main-nav {
    display: flex;
  }
  
  .main-nav a {
    padding: 8px 16px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.3s;
  }
  
  .main-nav a.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: bold;
  }
  
  .main-nav a:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }
  
  .search-area {
    flex: 1;
    max-width: 400px;
  }
  
  .search-box {
    display: flex;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    overflow: hidden;
  }
  
  .search-box input {
    flex: 1;
    padding: 0 16px;
    background: transparent;
    border: none;
    color: white;
    font-size: 14px;
  }
  
  .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .search-box button {
    width: 40px;
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
  }
  
  .user-area {
    display: flex;
    align-items: center;
  }
  
  .user-avatar {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 20px;
    cursor: pointer;
  }
  
  .user-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
  
  .user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 140px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #333;
    overflow: hidden;
    z-index: 200;
  }
  
  .menu-item {
    padding: 10px 16px;
    font-size: 14px;
    transition: background 0.2s;
  }
  
  .menu-item:hover {
    background: #f5f5f7;
  }
  
  .logout {
    color: #ec4141;
    border-top: 1px solid #eee;
  }
  
  .btn-vip {
    padding: 6px 16px;
    background: linear-gradient(to right, #ffd700, #ffb400);
    border: none;
    border-radius: 16px;
    color: #7a4a00;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .btn-vip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* 主体内容区样式 */
  .app-main {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  
  .banner-section {
    position: relative;
    height: 300px;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .banner {
    height: 100%;
  }
  
  .banner-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
  }
  
  .banner-item.active {
    opacity: 1;
  }
  
  .banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .banner-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  
  .banner-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 5px;
    cursor: pointer;
  }
  
  .banner-dots span.active {
    background: white;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .section-header h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 12px;
  }
  
  .section-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #ec4141;
    border-radius: 2px;
  }
  
  .more-link {
    font-size: 14px;
    color: #666;
    cursor: pointer;
  }
  
  .more-link:hover {
    color: #ec4141;
  }
  
  /* 推荐歌单样式 */
  .playlist-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }
  
  .playlist-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
  
  .playlist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
  
  .playlist-cover {
    position: relative;
    padding-top: 100%;
  }
  
  .playlist-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .play-count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
  }
  
  .play-count i {
    font-size: 12px;
    margin-right: 4px;
  }
  
  .play-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(236, 65, 65, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .playlist-card:hover .play-icon {
    opacity: 1;
  }
  
  .play-icon i {
    color: white;
    font-size: 14px;
  }
  
  .playlist-info {
    padding: 12px;
  }
  
  .playlist-info h3 {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 最新音乐样式 */
  .song-list {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .song-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
  }
  
  .song-item:hover {
    background: #f9f9f9;
  }
  
  .song-item.playing {
    background: #f0f7ff;
  }
  
  .song-index {
    width: 40px;
    text-align: center;
    color: #999;
    font-size: 16px;
  }
  
  .song-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
  }
  
  .song-name {
    font-size: 16px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .song-artist {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .vip-tag {
    display: inline-block;
    padding: 1px 4px;
    background: linear-gradient(to right, #ffd700, #ffb400);
    color: #7a4a00;
    font-size: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
  }
  
  .song-actions {
    display: flex;
    margin: 0 15px;
  }
  
  .btn-action {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f5f5f7;
    color: #666;
    margin: 0 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-action:hover {
    background: #e0e0e0;
    color: #333;
  }
  
  .song-duration {
    color: #888;
    font-size: 14px;
    width: 50px;
    text-align: right;
  }
  
  /* 播放控制栏样式 */
  .player-control {
    position: relative;
    display: flex;
    height: 80px;
    background: white;
    border-top: 1px solid #e0e0e0;
    padding: 0 20px;
    z-index: 100;
  }
  
  .player-left {
    display: flex;
    align-items: center;
    width: 300px;
  }
  
  .song-cover {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .song-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .song-details {
    flex: 1;
    min-width: 0;
  }
  
  .song-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .song-artist {
    font-size: 12px;
    color: #888;
  }
  
  .btn-like {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    margin-left: 15px;
  }
  
  .btn-like.liked {
    color: #ec4141;
  }
  
  .player-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
    margin: 0 40px;
  }
  
  .player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .btn-control {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 20px;
    margin: 0 10px;
    cursor: pointer;
  }
  
  .btn-control:hover {
    color: #333;
  }
  
  .btn-play {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ec4141;
    border: none;
    color: white;
    font-size: 18px;
    margin: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-play:hover {
    background: #d13232;
    transform: scale(1.05);
  }
  
  .progress-bar {
    display: flex;
    align-items: center;
  }
  
  .current-time, .total-time {
    font-size: 12px;
    color: #888;
    width: 40px;
  }
  
  .progress-track {
    flex: 1;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0 10px;
    cursor: pointer;
    position: relative;
  }
  
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ec4141;
    border-radius: 2px;
  }
  
  .progress-handle {
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid #ec4141;
    border-radius: 50%;
    transform: translate(50%, -50%);
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  .progress-track:hover .progress-handle {
    opacity: 1;
  }
  
  .player-right {
    display: flex;
    align-items: center;
    width: 200px;
  }
  
  .btn-volume {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    margin-right: 10px;
  }
  
  .btn-volume:hover {
    color: #333;
  }
  
  .volume-bar {
    flex: 1;
    display: flex;
    align-items: center;
  }
  
  .volume-track {
    flex: 1;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    position: relative;
  }
  
  .volume-level {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #666;
    border-radius: 2px;
    width: 80%;
  }
  
  .btn-playlist {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    margin-left: 15px;
  }
  
  .btn-playlist:hover {
    color: #333;
  }
  
  /* 播放列表样式 */
  .playlist-panel {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 400px;
    height: 400px;
    background: white;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    z-index: 99;
  }
  
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .panel-header h3 {
    font-size: 16px;
    font-weight: bold;
  }
  
  .btn-clear {
    border: none;
    background: transparent;
    color: #666;
    font-size: 14px;
    cursor: pointer;
  }
  
  .btn-clear:hover {
    color: #ec4141;
  }
  
  .playlist-songs {
    height: calc(100% - 50px);
    overflow-y: auto;
  }
  
  .playlist-song {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  .playlist-song:hover {
    background: #f9f9f9;
  }
  
  .playlist-song.active {
    background: #f0f7ff;
    color: #ec4141;
  }
  
  .playlist-song .song-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .playlist-song .song-artist {
    width: 120px;
    font-size: 12px;
    color: #888;
    padding: 0 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .playlist-song .song-duration {
    width: 50px;
    font-size: 12px;
    color: #888;
    text-align: right;
  }
  
  .btn-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #999;
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  .playlist-song:hover .btn-remove {
    opacity: 1;
  }
  
  .btn-remove:hover {
    color: #ec4141;
  }
  
  /* 图标样式 */
  [class^="icon-"] {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-cloud:before { content: "\e6d9"; }
  .icon-search:before { content: "\e62f"; }
  .icon-play:before { content: "\e61c"; }
  .icon-play-fill:before { content: "\e6d8"; }
  .icon-add:before { content: "\e6da"; }
  .icon-download:before { content: "\e6db"; }
  .icon-like:before { content: "\e6dc"; }
  .icon-sequence:before { content: "\e6dd"; }
  .icon-loop:before { content: "\e6de"; }
  .icon-random:before { content: "\e6df"; }
  .icon-prev:before { content: "\e6e0"; }
  .icon-next:before { content: "\e6e1"; }
  .icon-pause:before { content: "\e6e2"; }
  .icon-lyrics:before { content: "\e6e3"; }
  .icon-volume:before { content: "\e6e4"; }
  .icon-playlist:before { content: "\e6e5"; }
  .icon-close:before { content: "\e6e6"; }
  </style>